<!--
    天气查询对应的 API，使用 ALAPI
    内容展示：
        使用 表格
-->
<template>
    <div class="container">

      <!--  面包屑导航 -->
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="/onlinetool/#/">首页</a></li>
          <li class="breadcrumb-item"><a href="#">休闲娱乐</a></li>
          <li class="breadcrumb-item active" aria-current="page">天气查询</li>
        </ol>
      </nav>

      <!--  头部卡片  -->
      <div class="card border-primary ">
        <!--  放在 .card 里面的标签默认宽度会占满父元素宽度, 所以 a 标签应该放在 .card-body 里面-->
        <div class="card-header bg-info text-white">天气查询(此接口速度较慢，请耐心等待！)</div>
        <div class="card-body ">
          <h5 class="card-title text-primary ">出门前先看看天气吧~</h5>
          <p class="card-text"></p>
          <button type="button" @click="getWeatherData" class="btn btn-outline-success">查询当前城市7日天气</button>

          <div class="form-group mx-sm-3 mb-2 d-inline-block">
            <input type="text" v-model="city" class="form-control" id="inputPassword2" placeholder="输入城市名称">
          </div>

          <!--  旋转提示组件  -->
          <div class="spinner-border text-success ml-5" role="status">
            <span class="sr-only">Loading...</span>
          </div>
        </div>
      </div>

      <!--  结果数据展示区域  -->
      <table class="table table-striped table-hover mt-3">
        <thead class="thead-light">
        <tr>
          <th scope="col">日期</th>
          <th scope="col">天气情况</th>
          <th scope="col">最高温/最低温</th>
          <th scope="col">风向</th>
          <th scope="col">活动提示</th>
        </tr>
        </thead>
        <tbody class="">
        <tr v-for="item in weatherData" :key="item.id">
          <th scope="row">{{ item.date }}</th>
          <td>{{ item.wea }}</td>
          <td>{{ item.tem1 + "/" + item.tem2 }}</td>
          <td>{{ item.win }}</td>
          <td>{{ item.win_speed }}</td>
        </tr>
        </tbody>
      </table>


    </div>

  <!--  简易版 API 返回的格式-->
  <!--
      forecast数组的一个元素：
        date: "27日星期天"
        fengli: "<![CDATA[1级]]>"
        fengxiang: "北风"
        high: "高温 24℃"
        low: "低温 19℃"
        type: "小雨"
      yesterday 对象
        date: "26日星期六"
        fl: "<![CDATA[2级]]>"
        fx: "北风"
        high: "高温 22℃"
        low: "低温 19℃"
        type: "小雨"
  -->

  <!--  返回的 JSON 格式-->
  <!--
      {
    "code": 200,
    "msg": "success",
    "data": {
        "cityid": "101240101",
        "update_time": "2020-10-07 13:46:43",
        "city": "南昌",
        "cityEn": "nanchang",
        "country": "中国",
        "countryEn": "China",
        "data": [
            {
                "day": "7日（今天）",
                "date": "2020-10-07",
                "week": "星期三",
                "wea": "多云",
                "wea_img": "yun",
                "air": 10,
                "humidity": 77,
                "air_level": "优",
                "air_tips": "空气很好，可以外出活动，呼吸新鲜空气，拥抱大自然！",
                "alarm": {
                    "alarm_type": "",
                    "alarm_level": "",
                    "alarm_content": ""
                },
                "tem1": "20℃",
                "tem2": "15℃",
                "tem": "17℃",
                "win": [
                    "北风",
                    "北风"
                ],
                "win_speed": "3-4级",
                "hours": [
                    {
                        "day": "07日08时",
                        "wea": "阴",
                        "tem": "16℃",
                        "win": "北风",
                        "win_speed": "3-4级"
                    },
                    {
                        "day": "07日11时",
                        "wea": "多云",
                        "tem": "17℃",
                        "win": "北风",
                        "win_speed": "3-4级"
                    },
                    {
                        "day": "07日14时",
                        "wea": "多云",
                        "tem": "19℃",
                        "win": "北风",
                        "win_speed": "3-4级"
                    },
                    {
                        "day": "07日17时",
                        "wea": "晴",
                        "tem": "18℃",
                        "win": "北风",
                        "win_speed": "3-4级"
                    },
                    {
                        "day": "07日20时",
                        "wea": "多云",
                        "tem": "17℃",
                        "win": "北风",
                        "win_speed": "3-4级"
                    },
                    {
                        "day": "07日23时",
                        "wea": "多云",
                        "tem": "17℃",
                        "win": "北风",
                        "win_speed": "3-4级"
                    },
                    {
                        "day": "08日02时",
                        "wea": "多云",
                        "tem": "16℃",
                        "win": "北风",
                        "win_speed": "3-4级"
                    },
                    {
                        "day": "08日05时",
                        "wea": "晴",
                        "tem": "15℃",
                        "win": "北风",
                        "win_speed": "3-4级"
                    }
                ],
                "index": [
                    {
                        "title": "中国人民保险<br>中暑指数",
                        "level": "无中暑风险",
                        "desc": "天气舒适，令人神清气爽的一天，不用担心中暑的困扰。"
                    },
                    {
                        "title": "</em><em></em><em></em><em>",
                        "level": null,
                        "desc": "春天不减肥，夏天徒伤悲。风虽有点大，室内可健身。"
                    },
                    {
                        "title": "健臻·血糖指数",
                        "level": "易波动",
                        "desc": "血糖易波动，注意监测。"
                    },
                    {
                        "title": "穿衣指数",
                        "level": "较舒适",
                        "desc": "建议穿薄外套或牛仔裤等服装。"
                    },
                    {
                        "title": "洗车指数",
                        "level": "较不宜",
                        "desc": "风力较大，洗车后会蒙上灰尘。"
                    },
                    {
                        "title": "紫外线指数",
                        "level": "弱",
                        "desc": "辐射较弱，涂擦SPF12-15、PA+护肤品。"
                    }
                ]
            },
            {
                "day": "8日（明天）",
                "date": "2020-10-08",
                "week": "星期四",
                "wea": "晴",
                "wea_img": "qing",
                "tem1": "23℃",
                "tem2": "16℃",
                "tem": "18℃",
                "win": [
                    "北风",
                    "北风"
                ],
                "win_speed": "3-4级",
                "hours": [
                    {
                        "day": "08日08时",
                        "wea": "晴",
                        "tem": "18℃",
                        "win": "北风",
                        "win_speed": "3-4级"
                    },
                    {
                        "day": "08日11时",
                        "wea": "晴",
                        "tem": "21℃",
                        "win": "北风",
                        "win_speed": "3-4级"
                    },
                    {
                        "day": "08日14时",
                        "wea": "晴",
                        "tem": "22℃",
                        "win": "北风",
                        "win_speed": "3-4级"
                    },
                    {
                        "day": "08日17时",
                        "wea": "晴",
                        "tem": "22℃",
                        "win": "北风",
                        "win_speed": "3-4级"
                    },
                    {
                        "day": "08日20时",
                        "wea": "晴",
                        "tem": "20℃",
                        "win": "北风",
                        "win_speed": "3-4级"
                    },
                    {
                        "day": "08日23时",
                        "wea": "晴",
                        "tem": "19℃",
                        "win": "北风",
                        "win_speed": "3-4级"
                    },
                    {
                        "day": "09日02时",
                        "wea": "晴",
                        "tem": "16℃",
                        "win": "北风",
                        "win_speed": "3-4级"
                    },
                    {
                        "day": "09日05时",
                        "wea": "晴",
                        "tem": "17℃",
                        "win": "北风",
                        "win_speed": "3-4级"
                    }
                ],
                "index": [
                    {
                        "title": "中国人民保险<br>中暑指数",
                        "level": "无中暑风险",
                        "desc": "天气舒适，令人神清气爽的一天，不用担心中暑的困扰。"
                    },
                    {
                        "title": "</em><em></em><em></em><em>",
                        "level": null,
                        "desc": "春天不减肥，夏天徒伤悲。风虽有点大，室内可健身。"
                    },
                    {
                        "title": "健臻·血糖指数",
                        "level": "较易波动",
                        "desc": "血糖较易波动，注意监测。"
                    },
                    {
                        "title": "穿衣指数",
                        "level": "较舒适",
                        "desc": "建议穿薄外套或牛仔裤等服装。"
                    },
                    {
                        "title": "洗车指数",
                        "level": "较不宜",
                        "desc": "风力较大，洗车后会蒙上灰尘。"
                    },
                    {
                        "title": "紫外线指数",
                        "level": "很强",
                        "desc": "涂擦SPF20以上，PA++护肤品，避强光。"
                    }
                ]
            },
            {
                "day": "9日（后天）",
                "date": "2020-10-09",
                "week": "星期五",
                "wea": "晴",
                "wea_img": "qing",
                "tem1": "23℃",
                "tem2": "16℃",
                "tem": "17℃",
                "win": [
                    "北风",
                    "北风"
                ],
                "win_speed": "3-4级",
                "hours": [
                    {
                        "day": "09日08时",
                        "wea": "晴",
                        "tem": "17℃",
                        "win": "北风",
                        "win_speed": "3-4级"
                    },
                    {
                        "day": "09日11时",
                        "wea": "晴",
                        "tem": "19℃",
                        "win": "北风",
                        "win_speed": "3-4级"
                    },
                    {
                        "day": "09日14时",
                        "wea": "晴",
                        "tem": "22℃",
                        "win": "北风",
                        "win_speed": "3-4级"
                    },
                    {
                        "day": "09日17时",
                        "wea": "晴",
                        "tem": "21℃",
                        "win": "北风",
                        "win_speed": "3-4级"
                    },
                    {
                        "day": "09日20时",
                        "wea": "晴",
                        "tem": "19℃",
                        "win": "北风",
                        "win_speed": "3-4级"
                    },
                    {
                        "day": "09日23时",
                        "wea": "晴",
                        "tem": "17℃",
                        "win": "北风",
                        "win_speed": "3-4级"
                    },
                    {
                        "day": "10日02时",
                        "wea": "晴",
                        "tem": "16℃",
                        "win": "北风",
                        "win_speed": "3-4级"
                    },
                    {
                        "day": "10日05时",
                        "wea": "晴",
                        "tem": "17℃",
                        "win": "北风",
                        "win_speed": "<3级"
                    }
                ],
                "index": [
                    {
                        "title": "中国人民保险<br>中暑指数",
                        "level": "无中暑风险",
                        "desc": "天气舒适，令人神清气爽的一天，不用担心中暑的困扰。"
                    },
                    {
                        "title": "</em><em></em><em></em><em>",
                        "level": null,
                        "desc": "春天不减肥，夏天徒伤悲。风虽有点大，室内可健身。"
                    },
                    {
                        "title": "健臻·血糖指数",
                        "level": "较易波动",
                        "desc": "血糖较易波动，注意监测。"
                    },
                    {
                        "title": "穿衣指数",
                        "level": "较舒适",
                        "desc": "建议穿薄外套或牛仔裤等服装。"
                    },
                    {
                        "title": "洗车指数",
                        "level": "较不宜",
                        "desc": "风力较大，洗车后会蒙上灰尘。"
                    },
                    {
                        "title": "紫外线指数",
                        "level": "很强",
                        "desc": "涂擦SPF20以上，PA++护肤品，避强光。"
                    }
                ]
            },
            {
                "day": "10日（周六）",
                "date": "2020-10-10",
                "week": "星期六",
                "wea": "晴",
                "wea_img": "qing",
                "tem1": "24℃",
                "tem2": "17℃",
                "tem": "20℃",
                "win": [
                    "东北风",
                    "西北风"
                ],
                "win_speed": "<3级",
                "hours": [
                    {
                        "day": "10日08时",
                        "wea": "晴",
                        "tem": "20℃",
                        "win": "北风",
                        "win_speed": "<3级"
                    },
                    {
                        "day": "10日14时",
                        "wea": "晴",
                        "tem": "23℃",
                        "win": "东北风",
                        "win_speed": "<3级"
                    },
                    {
                        "day": "10日20时",
                        "wea": "晴",
                        "tem": "21℃",
                        "win": "东北风",
                        "win_speed": "<3级"
                    },
                    {
                        "day": "11日02时",
                        "wea": "晴",
                        "tem": "17℃",
                        "win": "西北风",
                        "win_speed": "<3级"
                    }
                ],
                "index": [
                    {
                        "title": "中国人民保险<br>中暑指数",
                        "level": "无中暑风险",
                        "desc": "天气不热，在炎炎夏日中十分难得，可以告别暑气漫漫啦~"
                    },
                    {
                        "title": "减肥指数",
                        "level": null,
                        "desc": "春天不减肥，夏天徒伤悲。天气较舒适，快去运动吧。"
                    },
                    {
                        "title": "健臻·血糖指数",
                        "level": "较易波动",
                        "desc": "血糖较易波动，注意监测。"
                    },
                    {
                        "title": "穿衣指数",
                        "level": "舒适",
                        "desc": "建议穿长袖衬衫单裤等服装。"
                    },
                    {
                        "title": "洗车指数",
                        "level": "适宜",
                        "desc": "天气较好，适合擦洗汽车。"
                    },
                    {
                        "title": "紫外线指数",
                        "level": "很强",
                        "desc": "涂擦SPF20以上，PA++护肤品，避强光。"
                    }
                ]
            },
            {
                "day": "11日（周日）",
                "date": "2020-10-11",
                "week": "星期日",
                "wea": "晴",
                "wea_img": "qing",
                "tem1": "25℃",
                "tem2": "18℃",
                "tem": "20℃",
                "win": [
                    "东北风",
                    "北风"
                ],
                "win_speed": "<3级",
                "hours": [
                    {
                        "day": "11日08时",
                        "wea": "晴",
                        "tem": "20℃",
                        "win": "西北风",
                        "win_speed": "<3级"
                    },
                    {
                        "day": "11日14时",
                        "wea": "晴",
                        "tem": "24℃",
                        "win": "东北风",
                        "win_speed": "<3级"
                    },
                    {
                        "day": "11日20时",
                        "wea": "晴",
                        "tem": "20℃",
                        "win": "东北风",
                        "win_speed": "<3级"
                    },
                    {
                        "day": "12日02时",
                        "wea": "晴",
                        "tem": "19℃",
                        "win": "北风",
                        "win_speed": "<3级"
                    }
                ],
                "index": [
                    {
                        "title": "中国人民保险<br>中暑指数",
                        "level": "无中暑风险",
                        "desc": "天气舒适，令人神清气爽的一天，不用担心中暑的困扰。"
                    },
                    {
                        "title": "减肥指数",
                        "level": null,
                        "desc": "春天不减肥，夏天徒伤悲。天气较舒适，快去运动吧。"
                    },
                    {
                        "title": "健臻·血糖指数",
                        "level": "不易波动",
                        "desc": "天气条件好，血糖不易波动，可适时进行户外锻炼。"
                    },
                    {
                        "title": "穿衣指数",
                        "level": "舒适",
                        "desc": "建议穿长袖衬衫单裤等服装。"
                    },
                    {
                        "title": "洗车指数",
                        "level": "适宜",
                        "desc": "天气较好，适合擦洗汽车。"
                    },
                    {
                        "title": "紫外线指数",
                        "level": "很强",
                        "desc": "涂擦SPF20以上，PA++护肤品，避强光。"
                    }
                ]
            },
            {
                "day": "12日（周一）",
                "date": "2020-10-12",
                "week": "星期一",
                "wea": "晴",
                "wea_img": "qing",
                "tem1": "25℃",
                "tem2": "17℃",
                "tem": "20℃",
                "win": [
                    "北风",
                    "北风"
                ],
                "win_speed": "<3级",
                "hours": [
                    {
                        "day": "12日08时",
                        "wea": "晴",
                        "tem": "20℃",
                        "win": "北风",
                        "win_speed": "<3级"
                    },
                    {
                        "day": "12日14时",
                        "wea": "晴",
                        "tem": "24℃",
                        "win": "北风",
                        "win_speed": "<3级"
                    },
                    {
                        "day": "12日20时",
                        "wea": "晴",
                        "tem": "20℃",
                        "win": "北风",
                        "win_speed": "<3级"
                    },
                    {
                        "day": "13日02时",
                        "wea": "晴",
                        "tem": "17℃",
                        "win": "北风",
                        "win_speed": "<3级"
                    }
                ],
                "index": [
                    {
                        "title": "中国人民保险<br>中暑指数",
                        "level": "无中暑风险",
                        "desc": "天气舒适，令人神清气爽的一天，不用担心中暑的困扰。"
                    },
                    {
                        "title": "减肥指数",
                        "level": null,
                        "desc": "春天不减肥，夏天徒伤悲。天气较舒适，快去运动吧。"
                    },
                    {
                        "title": "健臻·血糖指数",
                        "level": "较易波动",
                        "desc": "血糖较易波动，注意监测。"
                    },
                    {
                        "title": "穿衣指数",
                        "level": "舒适",
                        "desc": "建议穿长袖衬衫单裤等服装。"
                    },
                    {
                        "title": "洗车指数",
                        "level": "适宜",
                        "desc": "天气较好，适合擦洗汽车。"
                    },
                    {
                        "title": "紫外线指数",
                        "level": "很强",
                        "desc": "涂擦SPF20以上，PA++护肤品，避强光。"
                    }
                ]
            },
            {
                "day": "13日（周二）",
                "date": "2020-10-13",
                "week": "星期二",
                "wea": "晴",
                "wea_img": "qing",
                "tem1": "24℃",
                "tem2": "19℃",
                "tem": "17℃",
                "win": [
                    "无持续风向",
                    "无持续风向"
                ],
                "win_speed": "<3级",
                "hours": [
                    {
                        "day": "13日08时",
                        "wea": "晴",
                        "tem": "17℃",
                        "win": "北风",
                        "win_speed": "<3级"
                    },
                    {
                        "day": "13日14时",
                        "wea": "晴",
                        "tem": "24℃",
                        "win": "无持续风向",
                        "win_speed": "<3级"
                    },
                    {
                        "day": "13日20时",
                        "wea": "晴",
                        "tem": "21℃",
                        "win": "无持续风向",
                        "win_speed": "<3级"
                    },
                    {
                        "day": "14日02时",
                        "wea": "晴",
                        "tem": "21℃",
                        "win": "无持续风向",
                        "win_speed": "<3级"
                    }
                ],
                "index": [
                    {
                        "title": "中国人民保险<br>中暑指数",
                        "level": "无中暑风险",
                        "desc": "天气舒适，令人神清气爽的一天，不用担心中暑的困扰。"
                    },
                    {
                        "title": "减肥指数",
                        "level": null,
                        "desc": "春天不减肥，夏天徒伤悲。天气较舒适，快去运动吧。"
                    },
                    {
                        "title": "健臻·血糖指数",
                        "level": "不易波动",
                        "desc": "天气条件好，血糖不易波动，可适时进行户外锻炼。"
                    },
                    {
                        "title": "穿衣指数",
                        "level": "舒适",
                        "desc": "建议穿长袖衬衫单裤等服装。"
                    },
                    {
                        "title": "洗车指数",
                        "level": "适宜",
                        "desc": "天气较好，适合擦洗汽车。"
                    },
                    {
                        "title": "紫外线指数",
                        "level": "很强",
                        "desc": "涂擦SPF20以上，PA++护肤品，避强光。"
                    }
                ]
            }
        ]
    },
    "author": {
        "name": "Alone88",
        "desc": "由Alone88提供的免费API 服务，官方文档：www.alapi.cn"
    }
}
  -->

</template>

<script>


  export default {
    data() {
      return {
        /*  用户输入的城市*/
        city: '',
        /*  数据更新时间  */
        update_time: "",
        /*  天气数据的数组，数组的每个元素都是一个对象 */
        weatherData: []
      }

    },
    methods: {
      async getWeatherData() {
        this.$(".spinner-border").css("display", "inline-block");

        const result = await this.$http.get("https://v1.alapi.cn/api/tianqi/grid?city=" + this.city);

        if (result.status != 200) {
          return ;
        }

        this.weatherData = result.data.data.data;
        this.update_time = result.update_time;
        console.log(result);

        if (this.weatherData.length !== 0) {
          this.$(".spinner-border").css("display", "none");

        }

      }
    },

  }
</script>

<style scoped>

  .spinner-border {
    display: none;
  }

</style>
